<template>
	<view class="content">
		<view class="top-box" :style="{background:'url('+ topbg +') center no-repeat',backgroundSize:'cover'}">
			<navigator class="head-pic" url="/pages/my/edit">
				<view class="img">
					<image v-if="need" :src="baseUrl + userInfo.logo" mode="widthFix"></image>
					<image v-else :src="userInfo.logo" mode="widthFix"></image>
				</view>
				<view class="text" v-if="userInfo.name && userInfo.name !== null">{{userInfo.name}}</view>
				<view class="text" v-else>微信用户</view>
			</navigator>

			<!-- <view class="vipcode" @click="btn">
				<image src="../../static/images/icon35.png" mode="widthFix"></image>
				<text>会员码</text>
			</view> -->

			<view class="top-nav">
				<navigator class="item" url="/pages/collect/collect">
					<view class="icon">
						<image src="../../static/images/icon18.png" mode="widthFix"></image>
					</view>
					<text> 收藏 </text>
				</navigator>
				<navigator class="item" url="/pages/footmark/footmark">
					<view class="icon">
						<image src="../../static/images/icon19.png" mode="widthFix"></image>
					</view>
					<text> 足迹 </text>
				</navigator>
				<!-- <navigator class="item" url="/pages/shop/shop">
					<view class="icon">
						<image src="../../static/images/icon20.png" mode="widthFix"></image>
					</view>
					<text> 店铺地址 </text>
				</navigator> -->
				<navigator class="item" url="/pages/site/site">
					<view class="icon">
						<image src="../../static/images/icon21.png" mode="widthFix"></image>
					</view>
					<text> 管理地址 </text>
				</navigator>
			</view>

		</view>

		<view class="order-nav">
			<view class="o-tit">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon22.png" mode="widthFix"></image>
					</view>
					小程序订单
				</view>
				<navigator url="/pages/order/order?type=" class="right">
					<image src="../../static/images/icon23.png" mode="widthFix"></image>
				</navigator>
			</view>

			<view class="o-nav">
				<navigator class="item" url="../order/order?type=PENDING_PAYMENT">
					<view class="icon">
						<image src="../../static/images/icon24.png" mode="widthFix"></image>
						<view class="count" v-if="waitPayCount !== 0 && waitPayCount < 10">{{waitPayCount}}</view>
						<view class="count" v-if="waitPayCount !== 0 && waitPayCount >= 10">9+</view>
					</view>
					<text> 待支付 </text>
				</navigator>
				<navigator class="item" url="../order/order?type=PENDING_SHIPMENT">
					<view class="icon">
						<image src="../../static/images/icon25.png" mode="widthFix"></image>
						<view class="count" v-if="waitShipCount !== 0 && waitPayCount < 10">{{waitShipCount}}</view>
						<view class="count" v-if="waitShipCount !== 0 && waitPayCount >= 10">9+</view>
					</view>
					<text> 待发货 </text>
				</navigator>
				<navigator class="item" url="../order/order?type=SHIPPED">
					<view class="icon">
						<image src="../../static/images/icon26.png" mode="widthFix"></image>
						<view class="count" v-if="shippedCount !== 0 && shippedCount < 10">{{shippedCount}}</view>
						<view class="count" v-if="shippedCount !== 0 && shippedCount >= 10">9+</view>
					</view>
					<text> 待收货 </text>
				</navigator>
				<navigator class="item" url="../order/order?type=COMPLETED">
					<view class="icon">
						<image src="../../static/images/icon27.png" mode="widthFix"></image>
					</view>
					<text> 已完成 </text>
				</navigator>
				<navigator class="item" url="../after/after">
					<view class="icon">
						<image src="../../static/images/icon28.png" mode="widthFix"></image>
					</view>
					<text> 售后 </text>
				</navigator>
			</view>


		</view>

		<view class="nav-box">
			<navigator class="item" url="/pages/member/member">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon29.png" mode="widthFix"></image>
					</view>
					<text>会员中心</text>
					<view class="level">
						白金会员
						<image src="../../static/images/icon39.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="right">
					查看会员权益
					<image src="../../static/images/icon34.png" mode="widthFix"></image>
				</view>
			</navigator>
			<navigator class="item" url="/pages/point/exchange">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon30.png" mode="widthFix"></image>
					</view>
					<text>我的积分</text>

				</view>
				<view class="right">
					{{userInfo.point}}
				</view>
			</navigator>
			<navigator class="item" url="/pages/msg/msg">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon-msg.png" mode="widthFix"></image>
					</view>
					<text>我的消息</text>
				</view>
			</navigator>
			<navigator class="item" url="/pages/help/help">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon31.png" mode="widthFix"></image>
					</view>
					<text>帮助中心</text>
				</view>
			</navigator>
			<!-- <view class="item" @click="btn">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon32.png" mode="widthFix"></image>
					</view>
					<text>邀请好友</text>
				</view>
			</view> -->
			<!-- <navigator class="item" url="/pages/coupon/coupon">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/icon33.png" mode="widthFix"></image>
					</view>
					<text>我的优惠券</text>
				</view>
			</navigator> -->
			<navigator class="item" url="/pages/comment/list">
				<view class="left">
					<view class="icon">
						<image src="../../static/images/65.png" mode="widthFix"></image>
					</view>
					<text>我的评价</text>
				</view>
			</navigator>
		</view>

		<view class="contact-box">
			<view class="title">
				联系我们
			</view>
			<view class="icon-box">
				<button class="item" open-type="contact">
					<image src="../../static/images/icon12.png" mode="widthFix"></image>
				</button>
				<view class="item" @click="previewImage">
					<image src="../../static/images/icon36.png" mode="widthFix"></image>
				</view>
				<view class="item" @click="call">
					<image src="../../static/images/icon37.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="tips">工作日10:00-21:00</view>
		</view>

		<view class="pop" v-if="bill">
			<!-- <view class="invite" style="background-image: url(../../static/images/poster-img1.png);">
				<image src="../../static/images/poster.png" class="sharebg" mode="widthFix"></image>
				<image src="../../static/images/shareQr.jpg" class="code_img" mode="widthFix"></image>
				
			</view> -->
			<view id="tmp" @click="bill = false"></view>
			<canvas canvas-id="myCanvas" id="myCanvas" ref="myCanvas"></canvas>
			<view class="save" @click="save">保存图片</view>
		</view>

	</view>
</template>

<script>
	import {
		Account,
		statusCount
	} from '@/api/user.js'
	export default {
		data() {
			return {
				topbg: 'https://jf.bangchenwangluo.com/upload/file/image/bg.png',
				userInfo: '',
				bill: false,
				canvasW: 570,
				canvasH: 790,
				shippedCount: 0,
				waitPayCount: 0,
				waitShipCount: 0,
				qrCode: '',
				shareImage: '',
				baseUrl: this.$baseUrl,
				need: true
			}
		},
		// onLoad() {
		// 	this.userInfo = uni.getStorageSync('userInfo')
		// 	this.objInfo.name = this.userInfo.nickName
		// 	this.init()
		// },
		onShow() {
			this.init()
		},
		
		onShareAppMessage(e) {
			console.log(e, 1111111)
			let mpShare={
				title:'久福到家',
				path:'/pages/index/index?scene='
			}
			
			if(uni.getStorageSync('inviteId')){
				let inviteId=uni.getStorageSync('inviteId')
				mpShare.path='/pages/index/index?scene='+inviteId
			}
			return mpShare
		},
		methods: {
			async init() {
				await Account().then(res => {
					let that = this
					let info = res.data
			that.initData()
					console.log(info)
					// if(info.logo !== '' && info.name !== '' && info.logo !== null && info.name !== null) {
					// 	this.userInfo = info
					// 	this.objInfo.name = this.userInfo.name
					// 	uni.setStorageSync('userInfo', info)
					// } else {
					// 	this.userInfo = uni.getStorageSync('userInfo')
					// 	this.userInfo.name = this.userInfo.nickName
					// 	this.userInfo.logo = this.userInfo.avatarUrl
					// 	this.objInfo.name = this.userInfo.name
					// 	console.log('userInfo', uni.getStorageSync('userInfo'))
					// 	uni.setStorageSync('userInfo', this.userInfo)
					// }
					
					this.userInfo = info
					// this.objInfo.name = this.userInfo.name
					uni.setStorageSync('userInfo', info)
					
					if(this.userInfo.logo.indexOf('http') !== -1) {
						this.need = false
					} else {
						this.need = true
					}
					if(res.data.qrCode !== null) {
						uni.downloadFile({
							url: that.baseUrl + res.data.qrCode,
							success: function (r) {
								that.qrCode = r.tempFilePath
							}
						})
					}
					if(res.data.shareImage !== null) {
						uni.downloadFile({
							url: that.baseUrl + res.data.shareImage,
							success: function (r) {
								console.log(r)
								that.shareImage = r.tempFilePath
							}
						})
					}
				})
			},
			initData() {
				statusCount().then(res => {
					// console.log(res)
					this.waitShipCount = res.data.waitShipCount
					this.waitPayCount = res.data.waitPayCount
					this.shippedCount = res.data.shippedCount
				})
			},
			btn() {
				this.bill = true
				this.poster()
			},
			async poster() {
				uni.showLoading({
					title: 'Loading'
				})
				let that = this
				let text = that.userInfo.name
				const query = uni.createSelectorQuery().in(this)
				setTimeout(function() {
					query.select('#myCanvas').boundingClientRect(res => {
						let tcx = uni.createCanvasContext('myCanvas')
						tcx.drawImage('../../static/images/poster-img1.png', 0, 0, res.width, res
							.height)
						tcx.setFontSize(16 * (res.width / 420))
						tcx.fillText(text + '  I  邀你加入UMIND官网', (20 / 420) * res.width, (457 / 580) *
							res.height)
						tcx.drawImage(that.shareImage, 0, 0, res.width, (439 / 580) * res.height)
						tcx.drawImage(that.qrCode, (297 / 420) * res.width, (477 / 580) * res.height, (
							87 / 420) * res.width, (87 / 580) * res.height)
						tcx.draw()
						uni.hideLoading()
					}).exec()
				}, 500)
			},
			save() {
				let that = this
				uni.canvasToTempFilePath({
					canvasId: "myCanvas",
					complete(res) {
						console.log(res.tempFilePath)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								that.bill = false
							},
							fail: (e) => {
								uni.showToast({
									title: e,
									icon: 'none'
								})
							}
						})
					}
				})
			},

			previewImage() {
				//uniapp预览轮播图
				uni.previewImage({
					current: '', //预览图片的下标
					urls: ['https://jf.bangchenwangluo.com/upload/file/uploadfiles/2.png']
				})
			},
			call() {
				let phone = '‭4009907207'
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		// display: none;

		#myCanvas,
		.canvas {
			position: absolute;
			width: 570rpx;
			height: 790rpx;
			top: 5%;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 20rpx;
			background-position: center;
			background-size: cover;
		}

		#tmp {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.save {
			position: absolute;
			top: calc(8% + 840rpx);
			left: 50%;
			transform: translate(-50%, -50%);
			line-height: 70rpx;
			width: 400rpx;
			text-align: center;
			background-color: #C10016;
			color: #fff;
			font-size: 24rpx;
			border-radius: 70rpx;
		}

		.sharebg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.code_img {
			width: 119rpx;
			height: 119rpx;
			position: absolute;
			bottom: 2.5%;
			right: 8.7%;
		}
	}

	.top-box {
		padding: 160rpx 110rpx 60rpx;
		position: relative;

		.vipcode {
			position: absolute;
			width: 150rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 30rpx 0px 0px 30rpx;
			top: 120rpx;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 25rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 18rpx;
				letter-spacing: 3rpx;
				color: #3e3a39;
			}
		}

		.head-pic {
			text-align: center;
			margin-bottom: 80rpx;

			.img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background-color: #fff;
				margin: auto;
				margin-bottom: 20rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}

			.text {
				font-size: 18rpx;
				color: #fff;
				letter-spacing: 3rpx;
			}

		}

		.top-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				.icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 28rpx;
					color: #fff;
				}
			}
		}

	}

	.order-nav {
		padding: 60rpx 30rpx;
		border-bottom: 10rpx solid #efefef;

		.o-tit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 45rpx;

			.left {
				display: flex;
				align-items: center;
				color: #595757;
				font-size: 24rpx;

				.icon {
					width: 28rpx;
					margin-right: 15rpx;
				}
			}

			.right {
				width: 37rpx;
			}
		}

		.o-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				margin: 0 25rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					margin-bottom: 20rpx;
					position: relative;

					.count {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						color: #fff;
						line-height: 30rpx;
						text-align: center;
						top: -15rpx;
						right: -20rpx;
						background-color: #C10016;
						font-size: 18rpx;
					}
				}

				text {
					font-size: 28rpx;
					color: #595757;
				}
			}
		}
	}

	.nav-box {
		.item {
			padding: 35rpx 30rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.icon {
					width: 34rpx;
					margin-right: 15rpx;
				}

				.level {
					margin-left: 15rpx;
					display: flex;
					align-items: center;
					font-size: 16rpx;
					color: #fff;
					background-color: #b81c22;
					border-radius: 5rpx;
					padding: 7rpx 9rpx;

					image {
						width: 16rpx;
						margin-left: 10rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
				color: #595757;
				font-size: 28rpx;

				image {
					width: 15rpx;
					margin-left: 15rpx;
				}
			}

		}
	}

	.contact-box {
		text-align: center;
		padding: 50rpx 0;

		.title {
			color: #595757;
			letter-spacing: 2rpx;
			font-size: 30rpx;
			margin-bottom: 25rpx;
		}

		.icon-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;

			.item {
				width: 35rpx;
				margin: 0 35rpx;
			}
		}

		.tips {
			font-size: 16rpx;
			color: #9fa0a0;
		}
	}
</style>